import {useState} from "react";
import SwitchForm from "@/components/Head/SwitchForm";

function LoginModal(props: { close: any }) {

  const [formType, setFormType] = useState('')

  return (
    <div className='modal-login'>
      <div className='content'>
        <div className='method'>
          <span className={'inner ' + (!formType ? 'selected' : '')} onClick={() => setFormType('')}>密码登录</span>

          <span className={'inner ' + (formType === 'mobile' ? 'selected' : '')} onClick={() =>
            setFormType('mobile')
          }>短信登录</span>

          <span className={'inner ' + (formType === 'email' ? 'selected' : '')} onClick={() => {
            setFormType('email')
          }}>邮箱登录</span>
        </div>

        <div className='form'>
          <SwitchForm close={props.close}/>
        </div>

        <svg className='close-btn' onClick={props.close} viewBox='0 0 1024 1024' version='1.1'
             xmlns='http://www.w3.org/2000/svg'>
          <path d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='#2c2c2c'
                data-spm-anchor-id='a313x.7781069.0.i13'/>
          <path
            d='M292.571429 789.942857c-14.628571 0-21.942857-7.314286-29.257143-14.628571-14.628571-14.628571-14.628571-43.885714 0-58.514286l453.485714-453.485714c14.628571-14.628571 43.885714-14.628571 58.514286 0s14.628571 43.885714 0 58.514285l-453.485715 453.485715c-7.314286 7.314286-21.942857 14.628571-29.257142 14.628571z'
            fill='#ffffff' data-spm-anchor-id='a313x.7781069.0.i16'/>
          <path
            d='M746.057143 789.942857c-14.628571 0-21.942857-7.314286-29.257143-14.628571L256 321.828571c-14.628571-14.628571-14.628571-43.885714 0-58.514285 14.628571-14.628571 43.885714-14.628571 58.514286 0l453.485714 453.485714c14.628571 14.628571 14.628571 43.885714 0 58.514286 0 7.314286-14.628571 14.628571-21.942857 14.628571z'
            fill='#ffffff' data-spm-anchor-id='a313x.7781069.0.i15'/>
        </svg>
      </div>
    </div>
  )
}

export default LoginModal
